<template>
  <div class="content">
    <a-form :model="formDate" layout="inline">
      <a-form-item label="用户手机">
        <a-input v-model="formDate.search.phone" :allowClear="true" placeholder="请输入用户手机号"></a-input>
      </a-form-item>
      <a-form-item label="用户姓名">
        <a-input v-model="formDate.search.realname" :allowClear="true" placeholder="请输入用户姓名"> </a-input>
      </a-form-item>
      <a-form-item label="提现状态">
        <a-select
          placeholder="选择提现状态"
          :value="formDate.search.status"
          :allowClear="true"
          :options="getStatus"
          @change="handleChangeStatus"
          style="width: 160px"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="到账方式">
        <a-select
          placeholder="选择到账方式"
          :allowClear="true"
          :value="formDate.search.pay_use"
          :options="getPayments"
          @change="handleChangeMethods"
          style="width: 160px"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="申请时间">
        <a-date-picker
          show-time
          :value="formDate.search.start_time"
          placeholder="开始时间"
          @change="onChangeStart"
          @ok="onOk"
        />
        -
        <a-date-picker
          show-time
          :value="formDate.search.end_time"
          placeholder="结束时间"
          @change="onChangeEnd"
          @ok="onOk"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="queryFile"> 查询 </a-button>
        <a-button type="primary" @click="resetting" style="margin-left: 20px; background-color: #909399; border: 0">
          重置
        </a-button>
        <a-button type="primary" style="margin-left: 20px" @click="batchPass()"> 通过 </a-button>
        <a-button type="primary" style="margin-left: 20px; background-color: #ff4d4f; border: 0" @click="batchReject()">
          驳回
        </a-button>
        <!-- <a-button type="primary" style="margin-left: 20px"> 导出 </a-button> -->
      </a-form-item>
    </a-form>
    <div class="todayMoney">
      当日提现金额：{{ todayMount.today_money }}元 当日提现笔数：{{ todayMount.today_count }} 笔 总提现金额：{{
        todayMount.total_money
      }}元 审核中的金额：{{ todayMount.checking_money }}
    </div>
    <a-table
      bordered
      :scroll="{ x: 1000 }"
      :columns="columns"
      @change="change"
      :loading="loading"
      :pagination="{ defaultPageSize: formDate.page_size, total: total }"
      :row-selection="rowSelection"
      :data-source="dataSource"
    >
      <div slot="operate" slot-scope="text, record">
        <div v-show="record.status == 10" class="tsbBtns">
          <a-button class="pass" @click="pass(record.id)">通过</a-button>
          <a-button class="pass" @click="reject(record.id)">驳回</a-button>
        </div>
        <div
          v-show="record.status !== 10"
          :style="record.status == 1 ? 'color:green' : record.status == -1 ? 'color:red' : ''"
        >
          {{ record.status == 1 ? '已支付' : record.status == -1 ? '已驳回' : '' }}
        </div>
      </div>
    </a-table>
    <a-modal v-model="isDialog" title="选择提现方式" @ok="handleOk">
      <a-select v-model="optionId" :allowClear="true" style="width: 100%" placeholder="系统类型">
        <a-select-option v-for="item in option" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-modal>
    <a-modal v-model="isShow" title="选择提现方式" @ok="handOk" :confirm-loading="dialogLoading">
      <a-select v-model="optionId" :allowClear="true" style="width: 100%" placeholder="系统类型">
        <a-select-option v-for="item in option" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>
<script>
import {
  getTodayMoney,
  WithdrawalList,
  WithdrawalStatus,
  PaymentMethods,
  withdrawalMethodAPI,
  withdrawalOkAPI,
  withdrawalRejectAPI
} from '@/api/user.js'
export default {
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.status !== 10, // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  data() {
    return {
      dialogLoading: false,
      id: '',
      isShow: false,
      optionId: undefined,
      formDate: {
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID,
          start_time: '',
          end_time: '',
          status: undefined,
          pay_use: undefined
        }
      },
      isDialog: false,
      option: [],
      select_rows: [],
      //到账方式
      getPayments: [],
      selectedRowKeys: [],
      columns: [
        {
          title: '品牌名称',
          dataIndex: 'brand_name',
          key: 'brand_name'
        },
        {
          title: '申请时间',
          dataIndex: 'ctime',
          key: 'ctime'
        },
        {
          title: '订单号',
          dataIndex: 'order_sn',
          key: 'order_sn'
        },
        {
          title: '银行名称',
          dataIndex: 'user_debit_card.bank_name',
          key: 'user_debit_card.bank_name'
        },
        {
          title: '卡号',
          dataIndex: 'user_debit_card.bank_num',
          key: 'user_debit_card.bank_num'
        },
        {
          title: '申请人',
          dataIndex: 'realname',
          key: 'realname'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          key: 'phone'
        },
        {
          title: '提现金额',
          dataIndex: 'amount',
          key: 'amount'
        },
        {
          title: '提现手续费',
          dataIndex: 'sxf',
          key: 'sxf'
        },
        {
          title: '应到金额',
          dataIndex: 'actual_money',
          key: 'actual_money'
        },
        {
          title: '到账渠道',
          dataIndex: 'pay_type',
          key: 'pay_type'
        },
        {
          title: '到账方式',
          dataIndex: 'pay_use',
          key: 'pay_use'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operate' },
          align: 'center',
          width: 200
        }
      ],
      getStatus: [],
      //表格数据
      dataSource: [],
      loading: false,
      todayMount: {},
      total: 0
    }
  },
  mounted() {
    this.getTodayMonList()
    this.getList()
    this.withStatus()
    this.getPayment()
  },
  methods: {
    async pass(id) {
      const result = await withdrawalMethodAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.option = Object.entries(result.data).map(([id, name]) => {
        return { id: parseInt(id), name: name }
      })
      this.option.push({ id: '', name: '手持还款' })
      console.log(this.option)
      this.optionId = this.option[0].id
      this.id = id
      this.isShow = true
    },
    async handOk() {
      console.log(this.optionId)
      if (this.optionId === undefined) return this.$message.error('请选择提现方式')
      try {
        this.dialogLoading = true
        await withdrawalOkAPI({ brand_id: process.env.VUE_APP_BRAND_ID, id: [this.id], sf_channel: this.optionId })
        this.isShow = false
        this.getList()
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      } finally {
        this.dialogLoading = false
      }
    },
    reject(id) {
      this.$confirm({
        title: '确定驳回吗?',
        onOk: async () => {
          try {
            await withdrawalRejectAPI({ brand_id: process.env.VUE_APP_BRAND_ID, id: [id] })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    async batchReject() {
      if (this.select_rows.length < 1) return this.$message.error('请选择要操作的数据！')
      this.$confirm({
        title: '确定驳回吗?',
        onOk: async () => {
          try {
            const id = this.select_rows.map(item => item.id)
            await withdrawalRejectAPI({ brand_id: process.env.VUE_APP_BRAND_ID, id })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    async batchPass() {
      if (this.select_rows.length < 1) return this.$message.error('请选择要操作的数据！')
      const result = await withdrawalMethodAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.option = Object.entries(result.data).map(([id, name]) => {
        return { id: parseInt(id), name: name }
      })
      this.optionId = this.option[0].id
      this.isDialog = true
    },
    async handleOk() {
      if (!this.optionId) return this.$message.error('请选择')
      const id = this.select_rows.map(item => item.id)
      await withdrawalOkAPI({ brand_id: process.env.VUE_APP_BRAND_ID, id, sf_channel: this.optionId })
      this.isDialog = false
      this.getList()
      this.$message.success('操作成功')
    },
    //选择提现状态
    handleChangeStatus(e) {
      this.formDate.search.status = e
    },
    handleChangeMethods(e) {
      this.formDate.search.pay_use = e
    },
    //分页change事件
    change(e) {
      this.formDate.page = e.current
      this.getList()
    },
    //今日金额
    getTodayMonList() {
      getTodayMoney({ brand_id: process.env.VUE_APP_BRAND_ID }).then(res => {
        this.todayMount = res.data
      })
    },
    //开始时间
    onChangeStart(value, dateString) {
      this.formDate.search.start_time = dateString
    },
    //结束时间
    onChangeEnd(value, dateString) {
      this.formDate.search.end_time = dateString
    },
    onOk(e) {
      console.log(e)
    },
    //查询
    queryFile() {
      this.formDate.page = 1
      console.log(this.formDate)
      this.getList()
    },
    //重置
    resetting() {
      this.formDate = {
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID,
          start_time: '',
          end_time: '',
          status: undefined,
          pay_use: undefined
        }
      }
      this.getList()
    },
    getList() {
      WithdrawalList(this.formDate).then(res => {
        this.dataSource = res.data.list
        this.total = res.data.total
      })
    },
    //提现状态
    withStatus() {
      WithdrawalStatus().then(res => {
        this.getStatus = res.data
        var keyMap = {
          name: 'label',
          id: 'value'
        }
        for (let i = 0; i < this.getStatus.length; i++) {
          var obj = this.getStatus[i]
          for (var key in obj) {
            var newkey = keyMap[key]
            if (newkey) {
              obj[newkey] = obj[key]
              delete obj[key]
            }
          }
        }
      })
    },
    //到账方式数据
    getPayment() {
      PaymentMethods({ brand_id: process.env.VUE_APP_BRAND_ID }).then(res => {
        console.log(res)
        this.getPayments = res.data
        var keyMap = {
          name: 'label',
          id: 'value'
        }
        for (let i = 0; i < this.getPayments.length; i++) {
          var obj = this.getPayments[i]
          for (var key in obj) {
            var newkey = keyMap[key]
            if (newkey) {
              obj[newkey] = obj[key]
              delete obj[key]
            }
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.pass {
  /* width: 200px; */
  width: 46%;
  background-color: #1890ff;
  color: #fff;
  font-size: 14px;
}
.tsbBtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content {
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
}
.todayMoney {
  margin-top: 20px;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  background-color: #f2f2f2;
}
</style>
